<template>
	<view><!--根节点 不是div，而是view-->
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in imglist" :key="item">
				<view class="swiper-item">
					<image :src="url+item.bannering" style="width: 100%;" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				url: 'http://localhost:8080/',
				imglist: ["/static/myimages/8.jpg",
					"/static/myimages/9.jpg",
					"/static/myimages/10.jpg",
					"/static/myimages/11.jpg"
				]
			}
		},
		methods: {
			getData() {
				uni.request({
					url: 'http://localhost:8080/getBanner',
					method: 'GET', //post ,data:{text: 'uni.request'}
					success: (res) => {
						console.log(res.data);
						this.imglist = res.data.data;
						// console.log(this.imglist);
					}
				});
			},
		},
		onLoad() {
			this.getData(); //调用
		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 690rpx;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 600rpx;
		line-height: 600rpx;
		text-align: center;
	}

	image {
		height: 400rpx;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>